<template>
  <div id="IM">
    <div class="top">
      <h2>消息中心</h2>
    </div>
    <div class="search">
      <span style="margin-left: 10px;">搜索</span>
      <input type="text" class="search-input" placeholder="搜索">
      <button class="btn">搜索</button>
    </div>
    <div class="main">
      <div v-for="item in List || []" :key="item._id" class="userInfo" @click="(dj(item._id))">
        <div class="tx">
          <img :src="item.landlord" alt="">
        </div>
        <div class="username">
          <p style="margin-top: 20px;">{{ item.admin }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
let List = ref([])
let id = JSON.parse(localStorage.getItem("user") as string)._id
let getUserInfo = async () => {
  console.log(id);
  let { data: { data } } = await axios.get("http://localhost:3000/yg/getUser", { params: { id: id } })
  List.value = data
}

const dj = async (id: string) => {
  // 获取我要聊天对象的信息
  let { data: { data } } = await axios.get("http://localhost:3000/yg/getUser", { params: { id: id } })
  // 我要聊天的对象的id
  localStorage.setItem('im', JSON.stringify(data))
  router.push('/im?id=' + id)
}
onMounted(() => {
  getUserInfo()

})
</script>

<style scoped lang="scss">
#IM {
  width: 100%;
  height: 100%;
  padding-top: env(safe-area-inset-top); // 使用安全距离

  .top {
    width: 100%;
    height: 60px;
    text-align: center;
    background-color: #4A73FF;
    color: #fff;
    line-height: 60px;
  }

  .search {
    width: 100%;
    height: 40px;
    padding-left: 10px;
    line-height: 40px;

    .search-input {
      width: 70%;
      height: 30px;
    }

    .btn {
      width: 60px;
      height: 30px;
      background-color: #fff;
      color: #5BBFDA;
      border: none;
    }
  }

  .main {
    width: 100%;

    .userInfo {
      width: 90%;
      height: 100px;
      margin: 0 auto;
      display: flex;
      align-items: center;

      .tx {
        img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
      }

      .username {
        width: 50px;
        height: 100px;
      }
    }
  }
}
</style>